﻿
Ext.define('imageurl', {
    extend: 'Ext.data.Model',
    fields: [{ name: 'name', type: 'string' }, { name: 'url', type: 'string' }, { name: 'size', type: 'float'}]

});

var imagestore = new Ext.data.Store({
    model: 'imageurl',
    autoLoad: true,
    //            autoSync: true,
    //            queryMode: 'local',

    proxy: {
        type: 'ajax',
        url: '../DataViewImages.aspx',
        reader: {
            type: 'json',
            root: 'images'
        }
    }

});

imagestore.load();

//var tpl = new Ext.XTemplate(
//		    '<tpl for=".">',
//                '<div class="thumb-wrap" id="{name}">',
//		        '<div class="thumb" ><img src="{url}" title="{name}"></div>',
//		        '<span class="">{shortName}</span>',
//		        '<span>{sizeString}</span>',
////		        '<span>{dateString}</span>',
//		        '</div>', //x-editable可编辑  .thumb-wrap span
//            '</tpl>',
//            '<div class="x-clear"></div>'
//	    );

//	    var win = new Ext.Window({
//    	    title: "显示图片",
//    	    resizable: false,
//    	    closable:false,
//    	    closeAction:'close',
//    	    modal: true,
//    	    width: '600px',
//    	    height: '500px',
//    	    contentEl: "div1",
//    	    buttonAlign: "center",
//    	    buttons: [{
//    	        text:"关闭",
//    	        handler: function(){
//        	        win.hide();
//    	        }
//    	    }]
//	    });
//var customEl;
//var ResizableExample = {
//    init: function() {
//        var custom = new Ext.Resizable('custom', {
//            wrap: true,
//            pinned: true,
//            minWidth: 500,
//            minHeight: 500,
//            preserveRatio: true,
//            handles: 'all',
//            draggable: true,
//            dynamic: true
//        });
//        customEl = custom.getEl();
//        // move to the body to prevent overlap on my blog
//        document.body.insertBefore(customEl.dom, document.body.firstChild);

//        customEl.on('dblclick', function() {
//            customEl.hide(true);
//        });
//        customEl.hide();

//        //                Ext.get('showMe').on('click', function(){
//        //                    customEl.center();
//        //                    customEl.show(true);
//        //                });
//    }
//};

//Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);


var dataview = new Ext.view.View({
    store: imagestore,
    id: "dv",
    //tpl: tpl,
    tpl: [
                        '<tpl for=".">',
                        '<div class="thumb-wrap" id="{name}">',
                        '<div class="thumb"><img src="{url}" title="{name}"></div>',
                        '<span class="x-editable">{shortName}</span></div>',
                        '</tpl>',
                        '<div class="x-clear"></div>'
                        ],
    //height: 300,
    autoHeight: true,
    //            simpleSelect: true,
    multiSelect: true,
    trackOver: true,
    //            singleSelect: true,
    overItemCls: 'x-item-over',
    overClass: 'x-view-over',
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images to display',

    plugins: [
            Ext.create('Ext.ux.DataView.DragSelector', {}),
            Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'name' })
    // new Ext.DataView.DragSelector()
    //                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

    prepareData: function(data) {
        data.shortName = Ext.util.Format.ellipsis(data.name, 15);
        data.sizeString = Ext.util.Format.fileSize(data.size);
        //                data.dateString = data.date.format("m/d/Y g:i a");
        return data;
    },

    listeners: {
        selectionchange: {
            fn: function(dv, nodes) {
                var l = nodes.length;
                var s = ''; //l != 1 ? 's' : '';
                imagepanel.setTitle('图片列表 (' + l + ' 项' + s + ' 被选中)');
            }

        }
        //        'itemdblclick': function(dv, nodes) {
        //            var selNode = dataview.getSelectedNodes()[0];
        //            //var selNode = nodes[0];
        //            var i = document.getElementById("custom");
        //            //        	        i.style.visibility = "visible";
        //            i.src = "../Upload/" + selNode.id;

        //            customEl.center();
        //            customEl.show(true);
        //            //            	    win.show(this);
        //            //            	    win.center();
        //        }
    }
});


var imagepanel = new Ext.Panel({
    id: 'images-view',
    frame: true,
    //width: 535,
    autoHeight: true,
    collapsible: true,
    layout: 'fit',
    title: '图片列表(0 项 被选中)',
    tbar: [
                { text: "添加图片", handler: insertImages }, "-",
                { text: "删除图片", handler: deleteImages }
            ],
    butttonAlign: "left",
    tools: [{
        id: "refresh",
        qtip: "刷新图片列表",
        listeners: { 'click': function() {
        imagepanel.body.mask("加载中...", 'x-mask-loading');

            setTimeout(function() {
            imagestore.load();
                imagepanel.body.unmask();
            }, 1000);
        }
        }
}],
        items: dataview
    });
//    Ext.define("Ext.ux.DataView.images-view", {
//    extend: 'Ext.form.Panel',
//    alias:'widget.images-view',
//    frame: true,
//    //width: 535,
//    autoHeight: true,
//    collapsible: true,
//    layout: 'fit',
//    title: '图片列表(0 项 被选中)',
//    tbar: [
//                { text: "添加图片", handler: insertImages }, "-",
//                { text: "删除图片", handler: deleteImages }
//            ],
//    butttonAlign: "left",
//    tools: [{
//        id: "refresh",
//        qtip: "刷新图片列表",
//        listeners: { 'click': function() {
//            panel.body.mask("加载中...", 'x-mask-loading');

//            setTimeout(function() {
//                store.load();
//                panel.body.unmask();
//            }, 1000);
//        }
//        }
//       }],
//        items: dataview
//    });
//    
    
    //panel.render("divP");
   // panel.collapse(Ext.Component.DIRECTION_TOP, true, dataview);
    Ext.define('insertimage', {
        extend: 'Ext.form.Panel',
        alias: 'widget.insertimage',
        title: '文件上传',
        width: 400,
        height: 100,
        bodyPadding: 10,
        // margin: '50 10 50 80',

        frame: true,
        //renderTo: 'upload',
        items: [{
            xtype: 'filefield',
            name: 'fileName',
            fieldLabel: '上传',
            labelWidth: 50,
            regex: /^.+\.(bmp|jpg|png|gif|JPG|GIF|PNG|BMP)$/,
            regexText: "你只能选择jpg,png,gif格式的图片",
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: '选择文件'
}],

            buttons: [{
                text: '上传',
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: '../UploadS.aspx',
                            type: 'ajax',
                            waitMsg: '正在保存文件...',
                            success: function(fp, o) {
                                // Ext.Msg.alert('提示信息', '文件成功上传,文件名字为：'+o.result.file);
                                Ext.Msg.show({
                                    title: '提示信息',
                                    msg: '文件上传成功<br>上传文件名为：' + o.result.file,
                                    minWidth: 200,
                                    modal: true,
                                    buttons: Ext.Msg.OK
                                })
                                form.findField('fileName').setRawValue('');
                                imagestore.load();
                                Ext.getCmp('dv').refresh();
                            }
                        });
                        Ext.getCmp('content2').setVisible(false);
                        //                        Ext.getCmp('tasklist1').setVisible(true);


                    }
                    //var  timeId = window.setInterval("updateUsing()", 25000);  

                }
}]
            });
            function insertImages() {
                //            dialog = new Ext.ux.UploadDialog.Dialog({
                //                  url: 'UploadS.aspx',
                //		          width : 450,
                //		          height : 300,
                //		          minWidth : 450,
                //		          minHeight : 300,
                //		          draggable : true,
                //		          resizable : true,
                //		          modal: true,
                //		         // reset_on_hide: false
                //                 // getAllowCloseOnUpload:false,
                //                  //allow_close_on_upload: false,   //关闭上传窗口是否仍然上传文件
                //                 // upload_autostart: false   //是否自动上传文件
                //                 // getUploadAutostart: false
                //                });
                //
                //            dialog.show('show-button');

                var contentdlg = Ext.create('Ext.window.Window', {
                    width: 400,
                    height: 300,
                    closable: true,
                    draggable: true,
                    resizable: false,
                    maximized: false,
                    modal: true,
                    title: '查看内容',
                    id: 'content2',
                    plain: true,
                    layout: 'vbox',
                    //                layout: {
                    //                    type: 'vbox',
                    //                    align: 'stretch'
                    //                }, 
//                    items: [{
//                        xtype: 'insertimage',
//                        id: 'mainform2'
//                        }]
                    initComponent: function() {
                        var me = this;
                        this.items = [{
                            xtype: 'insertimage',
                            id: 'mainform2'
                                }];

                            this.callParent(arguments);
                        }  
                        });
                       
                    //                var selection = this.getView().getSelectionModel().getSelection()[this.getView().getSelectionModel().getSelection().length - 1];
                    //                changeDate(selection.data);
                    //                Ext.getCmp('mainform1').setActiveRecord(selection);
                    contentdlg.show();

                    // Ext.getCmp('dv').refresh();
                };
                
                function deleteImages() {
                    var nodecol = dataview.getSelectedNodes();
                    var count = nodecol.length;
                    // var count = dataview.getSelectionCount();
                    //var count = Ext.getCmp('dv').getSelectionCount();
                    var nodes = new Array();

                    if (count == 0) {
                        Ext.Msg.show({
                            title: "提示框",
                            msg: "请选择要删除的图片",
                            buttons: Ext.MessageBox.OK,
                            icon: Ext.MessageBox.INFO
                        });

                        return false;
                    }

                    for (var i = 0; i < count; i++) {
                        nodes[i] = dataview.getSelectedNodes()[i].id;
                    }

                    Ext.Msg.confirm("提示框", "你确认删除所选图片吗", function(button) {
                        if (button == "yes") {
                            Ext.MessageBox.show({
                                msg: "请等待...",
                                progress: true,
                                progressText: '删除中...',
                                width: 300,
                                wait: true,
                                waitConfig: {
                                    interval: 100,
                                    duration: 1000,
                                    fn: function() {
                                        Ext.Ajax.request({
                                            url: "../DeleteImages.aspx",
                                            params: {
                                                Nodes: nodes
                                            },
                                            callback: function(options, success, response) {
                                            if (success == true) {
                                                    Ext.Msg.show({
                                                        title: "提示框",
                                                        msg: "删除图片成功",
                                                        buttons: Ext.MessageBox.OK,
                                                        icon: Ext.MessageBox.INFO,
                                                        fn: function() {
                                                           imagestore.load();
                                                            Ext.getCmp('dv').refresh();
                                                        }
                                                    });
                                                }
                                                else {
                                                    Ext.Msg.show({
                                                        title: "提示框",
                                                        msg: "删除图片失败, 请重试",
                                                        buttons: Ext.MessageBox.OK,
                                                        icon: Ext.MessageBox.WARNING
                                                    });
                                                }
                                            }
                                        });

                                        Ext.MessageBox.hide();
                                    }
                                },
                                closable: true
                            });
                        }
                    });
                };
                //store.load();